
<template>
	<div>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<div class="price-page">
			  <div class="price-block" style="margin-top:0">
				  <u-tabs :list="priceTypes" keyName="ptName" :current="current1" @click="getPriceList"  
				  lineWidth="0" lineColor="#fff"
				  :activeStyle="{color: '#fff' ,'font-size': '22rpx','padding':'0 8px','background': '#FF5E01','border-top-left-radius': '16rpx','border-top-right-radius': '16rpx'}" 
				  :inactiveStyle="{color: '#8B8B8B' ,'font-size': '22rpx'}"></u-tabs>
			  </div>
			  
			  <div class="price-block">
			    <div class="price-top">
					<div class="price-top-left">
						<span style="float:left">{{ptName}} </span>
						<span class="num-span" :class="{'red':diffPrice > 0,'green' : diffPrice<0}" style="margin-left:40rpx;float:left">
							<span style="float:left;" v-if="diffPrice > 0"><u-icon name="arrow-upward" color="#FF0000"></u-icon></span>
							<span style="float:left;" v-else-if="diffPrice < 0"><u-icon name="arrow-downward"  color="#1bbc4c"></u-icon></span>
							<span style="float:left;" v-else>持平</span>
							<span style="float:left;margin-left:10rpx">{{diffPrice}}</span>
							<span style="margin-left:40rpx;float:left"><span v-if="diffPrice > 0">+</span>{{diffRate}}%</span>
						</span>
					</div>
					<div class="price-top-right" :class="{'red':diffPrice > 0,'green' : diffPrice<0}">
						<span style="font-size:20rpx">￥</span>{{currentPrice}}
					</div>
				</div>
				<div>
					<u-tabs :list="timelist"  @click="changeNum" :current="current" 
					lineWidth="0" lineColor="#fff"
					:activeStyle="{color: '#fff' ,'font-size': '22rpx','padding':'0 8px','background': '#FF5E01','border-top-left-radius': '16rpx','border-top-right-radius': '16rpx'}" 
					:inactiveStyle="{color: '#8B8B8B' ,'font-size': '22rpx'}"></u-tabs>
				</div>
				<div  style="width: 100%;height: 500rpx;">
			  	<qiun-data-charts type="area" :chartData="chartData" :opts="opts"/>
				</div>
			  </div>
			  
			  <div class="price-ps-block">
				  <div style="color: rgb(136, 136, 136);">此指数根椐以下产品价格加权平均计算得出：</div>
				  </div>
			  <div class="goods-item link-bg" style="cursor: pointer;" @click="toaddInquiry(item)" v-for="item in goodsList" :key="item.pmId">
				  <div class="goods-info" style="width: 100%; padding-left: 0px;">
					  <div class="goods-top">
						  <div class="goods-name">{{item.typeName}} {{item.goodsSn}} {{item.brandName}}</div> 
						  <div class="goods-price"><span>￥</span>{{item.goodsPrice}}</div>
					  </div> 
					
				  </div>
			  </div>
		</div>
		<f-tabbar ref="fTabbar"></f-tabbar>
	</div>
  
  
</template>

<script>

  import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  import {categoryPriceTypes,categoryPrice,priceMapping,pageSeo} from '@/config/api.js';
  const log = require('@/plugins/log.js');
  export default {
	  components: {
	    fTabbar
	  },
    data() {
      return {
       priceTypes:[],
       dayNum:180,
	   chartData: {},
	   opts: {
	   	    dataLabel:false,
			padding:[20,20,20,20],
	   		fontSize:8,
	           color: ["#fa7839"],
	           enableScroll: false,
	           legend: {},
	           xAxis: {
	             disableGrid: true,
				 labelCount: 7, //默认显示个数
	   		     fontSize:6
	           },
	           yAxis: {
	             gridType: "dash",
	             dashLength: 2
	           },
	           extra: {
	             area: {
	               type: "curve",
	               opacity: 0.2,
	               addLine: true,
	   			   gradient: true,
	               width: 2,
	             }
	           }
	   },
	   ptName:'',
	   currentPrice :'',
	   diffPrice :'',
	   diffRate :'',
	   timelist:[
		   {name:'长期',val:0},
		   {name:'6个月',val:180},
		   {name:'3个月',val:90},
		   {name:'30天',val:30},
		   {name:'15天',val:15},
		   {name:'7天',val:7},
		   ],
	   ptId:'',
	   current:1,
	   current1:0,
	   goodsList:[],
	   sourceFrom:'',
      }
    },
    async onLoad(options) {
      // 隐藏原生的tabbar
      uni.hideTabBar();
      await this.$onLaunched;
	  let ptId = getApp().globalData.ptId;
	  if(ptId){
	  	getApp().globalData.ptId = '';
	  }
    },
   async onShow() {
	    await this.$onLaunched;
		this.current = 1;
		this.current1 = 0
		this.getPriceTypes()
		// #ifdef H5
		pageSeo({pageType: 'categoryPricePage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
		let from=  getApp().globalData.from;
		this.sourceFrom='';
		if(from){
			this.sourceFrom=from;
			getApp().globalData.from='';
		}
	},
    onReady() {
     
    },
    methods: {
		toaddInquiry(item){
			getApp().globalData.pmId = item.pmId;
			let text='价格行情&'+item.typeName+'/'+item.goodsSn+'/'+item.brandName;
			if(this.sourceFrom=='card'){
				log.info(text);
			}
			uni.switchTab({
			  url: '/pages/public/addInquiry'
			});
		},
		changeNum(item){
			this.dayNum = item.val
			this.current = item.index
			let text='';
			if(this.dayNum==0){
			   text='价格行情&'+this.ptName+'/长期';
			}else{
			   text='价格行情&'+this.ptName+'/'+this.dayNum+'天';
			}
			if(this.sourceFrom=='card'){
				log.info(text);
			}
			this.getPrice()
		},
		getPriceTypes() {
			this.ptId = getApp().globalData.ptId;
		  categoryPriceTypes().then((res) => {
			this.priceTypes = res;
			if(this.ptId){
				this.current1 = this.priceTypes.findIndex((el)=>{
					return el.ptId == this.ptId
				})
			}else{
				this.current1 = 0;
				this.ptId = this.priceTypes[0]
			}
			this.getPriceList(this.priceTypes[this.current1])
		  })
		},
		
		getPriceList(item){
			this.ptId = item['ptId']
			this.ptName = item['ptName']
			let text='';
			if(this.dayNum==0){
			   text='价格行情&'+this.ptName+'/长期';
			}else{
			   text='价格行情&'+this.ptName+'/'+this.dayNum+'天';
			}
			if(this.sourceFrom=='card'){
				log.info(text);
			}
			this.getPrice()
			this.getGoods()
		},
		
		getGoods(){
		      priceMapping({ptId: this.ptId}).then((res)=>{
					this.goodsList = res
		      })
		},
		
		getPrice(){
			categoryPrice({ptId: this.ptId, dayNum: this.dayNum}).then((res) => {
				this.currentPrice = res.currentPrice;
				this.diffPrice = res.diffPrice;
				this.diffRate = res.diffRate;
				this.getServerData(this.ptName,res.xList, res.yList)
			})
		},
		
		//图表
		getServerData(ptName,x,y) {
		      //模拟从服务器获取数据时的延时
		      
		        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		        let res = {
		            categories: x,
		            series: [
		              {
		                name: ptName+'—最近7天统计',
		                data: y,
						pointShape:'none'
		              },
		            ]
		          };
		        this.chartData = JSON.parse(JSON.stringify(res));
		     
		},    
    }
  };
</script>

<style lang="scss">
	@import '@/style/common.scss';
  .price-page{
	  .u-tabs__wrapper__scroll-view{
	  	border-bottom:4rpx solid #FF5E01
	  }
	  .u-tabs__wrapper__nav__item{
	  	height:60rpx !important
	  }
	  
	  .u-tabs__wrapper__nav__item__text{
	  	display:block;
	  	line-height: 26px;
	  	height:26px;
	  	margin-bottom: -16rpx;;
	  }
	  .price-block{
		  background: #fff;
		  margin-top:30rpx;
		  .price-top{
			  @include flexbox(space-between,center);
			  font-size: 28rpx;
			  font-weight: bold;
			  padding:24rpx;
			  .num-span.red,.price-top-right.red{
				  color:#FF0000
			  }
			  .num-span.green,.price-top-right.green{
				  color:#1bbc4c;
			  }
		  }
		  
	  }
	   .price-ps-block{
	      font-size:24rpx;
	      color:#808080;
	      padding:16px;
	    }
		 .goods-item{
		    position: relative;
		    background: #fff;
			 @include flexbox(flex-start,flex-start);
		    padding:10px 16px;
		    .goods-img{
		      width:105px;
		      height:105px;
		      img{
		        width:100%;
		        height:100%;
		        object-fit: contain;
		      }
		    }
		    .goods-info{
		      width:calc(100% - 105px);
		      padding-left:16px;
		      .goods-top{
		        font-size:28rpx;
		        color:#333;
		        @include flexbox(flex-start,center);
		        .goods-name{
		          @include textoverflow(1);
		          width:calc(100% - 100px)
		        }
		        .goods-price{
		          margin-top:5px;
		          color:#ff4600;
		          font-size:36rpx;
		          width:100px;
		          text-align: right;
		          span{
		            font-size:24rpx;
		          }
		        }
		
		      }
		      .goods-attr{
		        font-size:24rpx;
		        color:#808080;
		        margin-top:5px;
		      }
		
		      .goods-store{
		        height:30px;
		        line-height: 30px;
		        font-size:24rpx;
		        color:#808080;
		        span{
		          display: inline-block;
		          vertical-align: middle;
		        }
		        .store-name{
		          max-width:calc(100% - 50px);
		          vertical-align: middle;
		          @include textoverflow(1);
		        }
		        .store-btn{
		          margin-left:10px;
		          color: #ff4600;
		          vertical-align: middle;
		          border: 1px solid #ff4600;
		          border-radius: 10px;
		          padding:0 5px;
		          line-height: 18px;
		          height:18px;
		          box-sizing: content-box;
		        }
		      }
		    }
		  }
		  .goods-item:after{
		      width:100%;
		      position: absolute;
		      box-sizing: border-box;
		      content: ' ';
		      left: 0;
		      bottom: 0;
		      border-bottom: 1px solid #eee;
		      -webkit-transform: scaleY(.5);
		      transform: scaleY(.5);
		  }
  }
  

  
</style>